<template>
    <div class="couponlink" :class="couponInfo.picture?'':'couponlinkdef'">
        <a-spin tip="加载中..." :spinning="loading">
            <template v-if="couponInfo.picture">
                <div>
                    <img style="width:100%;height:100%" :src="couponInfo.picture" alt="">
                    <div class="page-main">
                        <div class="top-tips">{{couponInfo.name || '--'}}</div>
                        <div class="coupon-inputbox">
                            <input class="coupon-input" v-model="phone" type="text" placeholder="请输入您的手机号">
                            <span class="coupon-inputbtn" @click="clickReceive">领取</span>
                        </div>
                        <div class="coupon-bottom">
                             <div class="bottom-list">活动介绍：{{couponInfo.description}}</div>
                            <div class="bottom-list" style="display:flex">
                                <span class="coupon-list-title">包含优惠券：</span>
                                <div class="coupon-list-box">
                                    <div class="coupon-list" v-for="item in couponInfo.couponS">
                                        <span>{{item.name}}</span>
                                        <span>{{item.placeOrganizationName}}</span>
                                    </div>
                                </div>

                            </div>
                           
                        </div>
                    </div>
                </div>

            </template>
            <template v-else>
                <img class="img-bg" :src="require('@/assets/img/couponLinkBg.png')" alt="">
                <img class="img-title" :src="require('@/assets/img/couponLinkTitle.png')" alt="">
                <div class="page-main">
                    <div class="top-tips">{{couponInfo.name || '--'}}</div>
                    <div class="coupon-inputbox">
                        <input class="coupon-input" v-model="phone" type="text" placeholder="请输入您的手机号">
                        <span class="coupon-inputbtn" @click="clickReceive">领取</span>
                    </div>
                    <div class="coupon-bottom">
                         <div class="bottom-list">活动介绍：{{couponInfo.description}}</div>
                        <div class="bottom-list" style="display:flex">
                            <span class="coupon-list-title">包含优惠券：</span>
                            <div class="coupon-list-box">
                                <div class="coupon-list" v-for="item in couponInfo.couponS">
                                    <span>{{item.name}}</span>
                                    <span>{{item.placeOrganizationName}}</span>
                                </div>
                                
                            </div>

                        </div>
                       
                    </div>
                </div>
            </template>

        </a-spin>
    </div>
</template>

<script lang="ts">
import marketApi from "@/api/marketApi";
import { Component, Vue } from "vue-property-decorator";
@Component({
    name: "couponLink",
    components: {},
})
export default class extends Vue {
    loading = false;
    async mounted() {
        this.setRemSize();
        this.getCouponInfo();
    }
    couponInfo = {};
    async getCouponInfo() {
        const id = this.$route.query.id + "";
        if (!id) {
            this.$message.error("系统错误");
            return;
        }
        try {
            this.loading = true;

            const res = await marketApi.getActivityInfoH5({ id });
            this.couponInfo = res.data;
        } finally {
            this.loading = false;
        }
    }
    phone = "";
    async clickReceive() {
        if (!this.phone) {
            this.$message.error("请输入手机号");
            return;
        }
        try {
            this.loading = true;

            const res = await marketApi.receiveActivityCoupons({
                activityId: this.$route.query.id,
                storeId: this.$route.query.storeId + "",
                phone: this.phone,
            });
            this.$message.success("领取成功");
        } finally {
            this.loading = false;
        }
    }
    setRemSize() {
        const oMeta = document.createElement("meta");
        oMeta.name = "viewport";
        oMeta.id = "viewport";
        const windowWidth = document.body.offsetWidth < window.screen.width ? document.body.offsetWidth : window.screen.width;
        let num = 100;
        if (window.navigator.appVersion.match(/iphone/gi)) {
            oMeta.content = "initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no";
            num = 100;
        } else {
            oMeta.content = "initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no";
        }
        document.getElementsByTagName("head")[0].appendChild(oMeta);
        const remsize = ((windowWidth / 750) * num).toFixed(0);
        document.getElementsByTagName("html")[0].style.fontSize = remsize + "px";
        document.getElementsByTagName("html")[0].dataset.remsize = remsize;
    }
}
</script>
<style lang="scss">
.couponlinkdef{
background-color: #ff6a55;
}
.couponlink {
    position: relative;
    z-index: 3;
    
    padding-bottom: 0.3rem;
    min-height: 100%;
    .img-bg {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
    }
    .img-title {
        position: absolute;
        width: 5.8rem;
        top: 1.6rem;
        left: -999rem;
        right: -999rem;
        z-index: 2;
        margin: 0 auto;
    }
    .page-main {
        position: relative;
        width: 100%;
        min-height: 100%;
        top: 0;
        left: 0;
        z-index: 9;
        padding-top: 9.95rem;
    }
    .top-tips {
        color: #fff;
        font-size: 0.33rem;
        font-weight: bold;
        text-align: center;
    }
    .coupon-price {
        font-size: 0.5rem;
        font-weight: bold;
        color: #1e1e1e;
        margin-top: 0.2rem;
        font-style: italic;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .coupon-title-num {
        color: #fc4a40;
        margin: 0 0.1rem;
        font-size: 0.7rem;
    }
    .coupon-time {
        text-align: center;
        font-size: 0.24rem;
        color: #1e1e1e;
    }
    .coupon-inputbox {
        width: 70%;
        margin: 0 auto;
        background-color: #ff0002;
        height: 0.76rem;
        border-radius: 0.76rem;
        display: flex;
        align-items: center;
        padding: 0.04rem;
        margin-top: 0.5rem;
    }
    .coupon-input {
        border: unset;
        height: 100%;
        border-radius: 0.68rem;
        width: 75%;
        padding: 0 0.2rem;
    }
    .coupon-inputbtn {
        color: #fff;
        width: 25%;
        display: inline-block;
        text-align: center;
        font-size: 0.32rem;
    }
    .coupon-bottom {
        font-size: 0.24rem;
        color: #fff;
        padding: 0 0.2rem;
        margin-top: 1.5rem;
    }
    .bottom-list {
        margin-bottom: 0.1rem;
    }
    .coupon-list-title {
        display: inline-block;
        flex-shrink: 0;
    }
    .coupon-list-box {
        display: inline-block;
        width: 50%;
        flex-grow: 1;
        padding: 0.2rem;
    }
    .coupon-list {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}
</style>
